import type { questionComponentType, QuestionTitlePropsType } from "@/utils/type";
import { Form, Input, Select,Checkbox } from "antd";
import { useEffect } from "react";


type propsType = questionComponentType & {
  onChange: (value: QuestionTitlePropsType) => void;
}

const options = [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }]



const TitlePropComponent = (props: propsType ) => {


  const [form] = Form.useForm();
  const { text = '', level = "3", isCenter = 'false' } = props.props;


  const handleChange = ()=>{
    props.onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({ text, level, isCenter })
  }, [text, level, isCenter, form])

  return (
    <Form 
    onValuesChange={handleChange} 
    layout="vertical" 
    initialValues={{ text, level, isCenter }} 
    form={form}
    disabled={props.isLocked}
    >
      <Form.Item name="text" label="标题内容：" rules={[{ required: true, message: "请输入标题内容" }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item name="level" label="层级：" >
        <Select options={options}></Select>
      </Form.Item>
      <Form.Item name="isCenter" valuePropName="checked" >
        <Checkbox>居住显示</Checkbox>
      </Form.Item>
    </Form>
  )
}

export default TitlePropComponent;